<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>09_RegExp-正则表达式的使用</title>
</head>
<body>

  输入账号: <input type="text">
  <p class="tip">请输入账号</p>

  <script>

    // 1.使用正则对象上的实例方法
    // webpack -> loader -> test: 匹配文件名
    // 正则 -> 拿到文件 -> loader操作
    // 1.1.test方法: 检测某一个字符串是否符合正则的规则
    const reg1 = /abc/ig
    const message = 'abc123abc'
    if (reg1.test(message)) {
      console.log('符合规则')
    } else {
      console.log('不符合规则')
    }

    // 1.2.exec方法: 检测某一个字符串是否符合正则的规则, 返回值是一个数组
    const reg2 = /abc/ig
    const message2 = 'abc123abc'
    const result = reg2.exec(message2)
    console.log(result)

    // 2.使用正则对象上的静态方法
    // 2.1.RegExp.prototype.toString() -> 返回正则对象的字符串
    const reg3 = /abc/ig
    console.log(reg3.toString())

    // 2.2.RegExp.prototype.source -> 返回正则对象的字符串
    const reg4 = /abc/ig
    console.log(reg4.source)

    // 3. match方法
    const message3 = 'abc123abc'
    const result2 = message3.match(reg1)
    console.log(result2)

    // 4. matchAll方法
    // 注意: matchAll传入的正则修饰符必须加g
    const message4 = 'abc123abc, abc123abc'
    const result3 = message4.matchAll(reg1)
    console.log(result3)
    console.log(result3.next());
    console.log(result3.next());
    console.log(result3.next());
    for (const item of result3) {
      console.log(item)
    }
    
    // 5. replace方法
    const message5 = 'abc123abc'
    const result4 = message5.replace(reg1, 'cba')
    console.log(result4)

    // 6. split方法
    const result5 = message5.split(reg1)
    console.log(result5)

    // 7. test方法: 返回布尔值
    const result6 = reg1.test(message5)
    console.log(result6)

    // 8. search方法: 返回匹配到的字符串的索引
    // 注意: search传入的正则修饰符必须加g
    const result7 = message5.search(reg1)
    console.log(result7)

    // 案例: 让用户输入的账号必须是aaaaa以上
    const inputEl = document.querySelector('input')
    const tipEl = document.querySelector('.tip')

    inputEl.oninput = function() {
      const reg = /^a{5}/
      if (reg.test(this.value)) {
        tipEl.innerText = '输入的内容符合规则要求'
      } else {
        tipEl.innerText = '输入的内容不符合规则要求, 请重新输入'
      }
    }



  </script>
  
</body>
</html>